<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
    <script>
        function addEmp(){
            // 创建tr
            let trChild = document.createElement("tr");
            // 创建td
            let nameTd = document.createElement("td");
            let salaryTd = document.createElement("td");
            let operatorTd = document.createElement("td");

            // 获取用户输入的姓名与工资
            let name = document.getElementById("name").value;
            let salary = document.getElementById("salary").value;

            // 创建文本
            let nameText = document.createTextNode(name);
            let salaryText = document.createTextNode(salary);
            // 创建超链接
            let aChild = document.createElement("a");
            // 创建超链接文本
            let aText = document.createTextNode("删除");

            // 将超链接文本插入到超链接中
            aChild.appendChild(aText);
            aChild.href = "javascript:;";
            // 为超链接绑定事件
            aChild.onclick = function(){
                // 此处this表示触发事件的事件源,即:点击的超链接
                this.parentNode.parentNode.remove();
            }

            // 将td中的内容插入到td中
            nameTd.appendChild(nameText);
            salaryTd.appendChild(salaryText);
            operatorTd.appendChild(aChild);

            // 将td插入到tr中
            trChild.appendChild(nameTd);
            trChild.appendChild(salaryTd);
            trChild.appendChild(operatorTd);

            // 将tr插入到表格末尾
            let tableChild = document.getElementById("t");
            tableChild.appendChild(trChild);
        }
    </script>
</head>
<body>
<h1>添加员工信息</h1>
姓名:<input type="text" id="name"><br>
工资:<input type="text" id="salary"><br>
<input type="button" value="添加" onclick="addEmp()">
<hr>
<!--
    需求一:添加操作
        在表格中,初始情况下是没有员工的
        在表单元素中输入了对应的员工信息之后,点击添加
        此时会在表格中多出一行信息
        该信息为用户输入的员工信息
    需求二:删除操作
        当用户点击了某一个员工所在行的删除超链接
        则该员工从表格中移除
-->
<table id="t" border="1" style="background-color: #dddddd;width: 400px;">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
    <!--<tr>-->
        <!--<td>admin</td>-->
        <!--<td>6000.0</td>-->
        <!--<td><a href="javascript:;" onclick="">删除</a></td>-->
    <!--</tr>-->
</table>
</body>
</html>